@charset "utf-8";
@function r($px) {
    @return $px/$fontsize*1rem;
}
@import "../_reset.scss";
$fontsize: 40;

html{
    position: relative;
//  overflow: hidden;
    font-size: 0;
}
#web{
    width: 100%;
    height: 100%;
    background: #bf0c21;
    font-family: "楷体""微软雅黑";
//  position: relative;
    position: absolute;
    overflow: scroll;
    background: url(../../img/index/bg.png) 100% 100%;
    filter: blur(r(3));
//  display: none;
  } 
  .host{
      font-size: r(30);
      color: #e7c598;
      font-family: "宋体","微软雅黑";
      font-weight: bold;
      text-align: center;
      margin-top: r(27);
      i{
          font-weight: bold;
          font-style: normal;
          color: #FEFDFC;
          border-bottom: 1px solid #E7C598;
      }
  }
  .table{
      width:r(388);
      margin: 0 auto;
  
  .table_Big{
      width: r(217);
      height: r(217);
      margin: 0 auto;
      margin-top: r(34);
      img{
          width: 100%;
          height: 100%;
         
      }
  }
  .sm_table{
      width: r(180);
      height: r(174);
      display: inline-block;
      text-align: center;
      position: relative;
//    margin-top: r(-10);
       span{
           display:inline-block;
//         text-align: center;
            margin: 0 auto;
            width:r(153);
            height: r(174);  
          img{
              width: 100%;
              height: 100%;
             }
          }
          p{
              font-size: r(22);
              color: #BF0C21;
              position: absolute;
              top: r(71);
              left: r(60);
          }
  }

  }
.footer_btn{
        width: r(318);
        height: r(45);
        margin: 0 auto;
        margin-bottom: r(38);
        margin-top: r(15);
        img{
            width: 100%;
            height: 100%;
        }
    }

.footer{
//  position: relative;
    position: absolute;
    width:100%;
    height: r(128);
    line-height: r(128);
    font-size: 0;
    bottom: 0;
    
    .footer_img{
        
        width: r(41);
        height: r(41);
        position: fixed;
        right: r(56);
        bottom: r(25);
        font-size: 0;
        img{
            width: 100%;
            height: 100%;
            vertical-align: top;
        }
    }
}
 #web2{
        width: 100%;
        height: 100%;
        font-family: "楷体""微软雅黑";
        background: rgba(0,0,0,.5);
        position: absolute;
        position: relative;
        top: 0;
        animation: s1 1s linear ;
//      display: none;
        
        .index_smallWin{
            width: r(413);
            height: r(250);
            background: #e7c598;
            border-radius: r(8);
            left: r(-999);
            right: r(-999);
            margin: 0 auto; 
            position: relative;
            position: absolute;
            top: r(353);
            animation: s2 0.7s linear;
        
        >a{
            display: block;
            width: r(35);
            height: r(35);
            position: absolute;
            top: r(10);
            right: r(15);
            >img{
               vertical-align: top;
               width: 100%;
               height: 100%; 
            }
            
        }
        p{
            color: #BF0C21;
            font-size: r(22);
            text-align: center;
            margin-top: r(30);
        }
       div:first-child{
            margin-top: r(11);
       }
       div{
           width: r(222);
           height: r(38);
           background: #BF0C21;
           color: #E7C598;
           margin: 0 auto;
           font-size: r(20);
//         line-height: r(50);
            margin-top: r(11);
            border-radius: r(8);
            text-align: center;
            a{
                line-height: r(38);
                width: 100%;
                height: 100%;
                color: #E7C598;
            }
       }
        
    }
 }
#web3{
        width: 100%;
        height: 100%;
        font-family: "楷体""微软雅黑";
        background:#BF0C21;
        position: absolute;
        position: relative;
        top: 0;
        animation: s1 1s linear ;
        background: url(../../img/index/bg.png) 100% 100%;
        display: none;
}
        .content {     
                z-index: 2;    
                width: r(476);  
                height: r(533);     
                line-height: 198px;  
                text-align: center;  
                color: #fff;  
                font-size: 70px;  
                position: absolute;
                left: r(80);
                top:r(182);
                animation: d1 0.8s linear;
            
            .site{
                width: r(108);
                height: r(108);
                img{
                    width: 100%;
                    height: 100%;
                    vertical-align:top;
                    }
                  }
               
            .firstSite{
                position: absolute;
                top: 0;
                left: r(184);
                
            }
            .secondSite{
                position: absolute;
                top: r(108);
                left: 0;
            }
             .thirdSite{
                position: absolute;
                top: r(320);
                left: 0;
            }
             .fourthSite{
               position: absolute;
               bottom: 0;
               left: r(184);
            }
            .table_desk{
                width: r(273);
                height: r(273);
                position: absolute;
                top: r(130);
                left: r(102);
                p{
                    color: #BF0C21;
                    position: absolute;
                    font-size: r(30);
                    top: r(-60);
                    left: r(90);
                }
            }
            .table_desk>img{
                width: 100%;
                height: 100%;
            }
            .fifthSite{
                position: absolute;
                right: 0;
                top: r(108);
            }
            .sixthSite{
                position: absolute;
                right: 0;
                top: r(320);
            }
        } 
      .text_end{
            display: block;
            width: r(275);
            height: r(70);
            color: #E7C598;
            margin: 0 auto;
            text-align: center;
            font-weight: bold;
            font-size: r(25);
            position: absolute; 
            margin-left:r(194);
            line-height: r(35);
            margin-top: r(800);
//          display: none;
            i{
                font-size: r(25);
                font-weight: bold;
                font-style: normal;
                color: #FEFDFC;
                border-bottom: 1px solid #E7C598;
            }
           
        }
            @keyframes d1{
                0%{
                    transform: scale(0); 
                    
                }
                100%{
                    transform: scale(1);
                }
            }
 
 #web4{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.5);
        position: absolute;
        top: 0;
        background-image: url(../../img/set/share.png);
        background-repeat: no-repeat;
        background-position-x: r(230);
        display: none;
        z-index: 999;
        >a{
            display: block;
            width: r(50);
            height: r(50);
            border-radius: 50%;
            position: absolute;
            right: r(10);
            top: r(5);
            background: rgba(0,0,0,0.8);
            animation: trans 1s linear  infinite;
        }
        .index_smallWin1{
            width: r(413);
            height: r(250);
            background: #e7c598;
            border-radius: r(8);
            left: r(-999);
            right: r(-999);
            margin: 0 auto; 
            position: relative;
            position: absolute;
            top: r(353);
            animation: show 0.4s linear;
       
        >a{
            display: block;
            width: r(35);
            height: r(35);
            position: absolute;
            top: r(10);
            right: r(15);
            >img{
               width: 100%;
               height: 100%; 
            }
            
        }
        p{
                font-size: r(30);
                color: #BF0C21;
                text-align: center;
                margin-top: r(106);
                line-height: r(34);
            }
        
    }
 }
 
@keyFrames s1{
    0%{
        opacity: 0;    
    }
    100%{
        opacity: 1;
    }
}
@keyFrames s2{
    0%{
        opacity: 0;
        transform: scale(0);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}

@keyFrames s3{
            0%{
                opacity: 1;
                transform: scale(1);
                }
                100%{
                opacity: 0;
                transform: scale(0);
            }
        }

@keyFrames trans{
    0%{
        opacity: 0.8;
    }
    50%{
        opacity: 0;
    }
    100%{
        opacity: 0.8;
    }
}
